<template>
  <div>
    <div class="mtop">
      <div class="imgb">
        <img :src="imgUrl" alt="" />
      </div>
      <div class="tit">
        <div>{{ name }}</div>
      </div>
      <div class="btn" @click="$router.push({ path: '/singer' })">
        <span class="iconfont icon-fanhui-xianxing"></span>
        歌手
      </div>
    </div>
    <dl class="musiclist">
      <dt
        @click="
          gotoplay(songs[0].id, songs[0].name, songs[0].al.picUrl, songs[0].ar)
        "
        @click.once="pushlist"
      >
        <span class="iconfont icon-bofang"></span>
        播放全部<em>(共{{ songs.length }}首)</em>
      </dt>
      <dd
        v-for="(item, index) in songs"
        :key="index"
        @click="gotoplay(item.id, item.name, item.al.picUrl, item.ar)"
        @click.once="pushlist"
      >
        <h3>{{ index + 1 }}</h3>
        <div>
          <p>{{ item.name }}</p>
          <div class="author">
            <span>{{ item.ar[0].name | authorFn(item.ar) }}</span>
          </div>
        </div>
      </dd>
    </dl>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { getTopsong } from "../../api/singer";
export default {
  data() {
    return {
      songs: {},
      name: "",
      imgUrl: "",
      author: "",
      show: true,
    };
  },
  methods: {
    gotoplay(...data) {
      let playData = {
        id: data[0],
        name: data[1],
        pic: data[2],
        author: data[3],
      };
      this.$store.commit("curListFn", playData);
      this.$store.commit("playflagFn", true);
    },
    pushlist() {
      let list = [];
      this.songs.forEach((item) => {
        list.push({
          id: item.id,
          name: item.name,
          pic: item.al.picUrl,
          author: item.ar,
        });
      });
      this.$store.commit("allListFn", list);
    },
  },
  created() {
    let id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.imgUrl = this.$route.query.img;
    if (id) {
      getTopsong({ id: id }).then((data) => {
        if (data.code == 200) {
          this.show = false;
          this.songs = data.songs;
        }
        console.log(data);
      });
    }
  },
  filters: {
    authorFn(old, newd) {
      let str = "";
      newd.forEach((item) => {
        str = str + item.name + " / ";
      });
      str = str.substr(0, str.length - 2);
      return str;
    },
  },
};
</script>
<style lang="less">
.mtop {
  height: 40vh;
  background-color: #ccc;
  position: relative;
  .imgb {
    height: 100%;
    img {
      width: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin-bottom: 20px;
      max-width: 100%;
      margin: auto;
    }
  }
  .tit {
    position: absolute;
    left: 18px;
    bottom: 25px;
    font-size: 5vw;
    font-weight: bolder;
    color: #fff;
    span {
      font-size: 3vw;
    }
  }
  .btn {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 4vw;
    color: #fff;
    font-weight: bolder;
  }
}
.musiclist {
  width: 100%;
  height: calc(60vh + 12px);
  border-radius: 12px 12px 0 0;
  position: fixed;

  background-color: #f2f3f4;
  // top: -12px;
  bottom: 0;
  overflow: scroll;
  dt {
    height: 46px;
    border-bottom: 2px solid #e2e2e2;
    font-size: 0.5em;
    line-height: 46px;
    display: flex;
    span {
      flex: 0 0 50px;
      font-size: 1.5em;
      line-height: 46px;
      text-align: center;
    }
    em {
      font-style: normal;
      color: #ccc;
      font-size: 1em;
    }
  }
  dd {
    height: 70px;
    display: flex;
    color: #707271;
    border-bottom: 2px solid #e2e2e2;
    h3 {
      flex: 0 0 50px;
      text-align: center;
      line-height: 78px;
      font-size: 0.5em;
      margin: 0;
    }
    div {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        margin-top: 16px;
        font-size: 0.5em;
        color: #444747;
      }
      .author {
        display: flex;
        flex-direction: row;
        justify-content: start;
        span {
          height: 16px;
          font-size: 0.3em;
          color: #939494;
        }
      }
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>